<div class="l-item-wrapper">
    <div [hidden]="!allowedUserEdit">
        <button [hidden]="isRemoveTarget()" class="far fa-edit" (click)="onEdit()"></button>
        <button [hidden]="isRemoveTarget()" class="far fa-trash-alt" (click)="onRemove()"></button>
        <button [hidden]="!isRemoveTarget()" class="fas fa-arrow-left" (click)="onCancelRemove()"></button>
        <button [hidden]="!isRemoveTarget()" class="fas fa-check" (click)="onConfirmRemove()"></button>
    </div> 
    <i class="far" 
        [class.fa-square]="!isChecked" 
        [class.fa-check-square]="isChecked"
        [class.l-disabled]="!isEnableUser()" 
        (click)="onAddUser()"></i> ({{pinpointUser.department}}) {{pinpointUser.name}}
</div>
